<template>
  <div class="teacherinfo">
    <div class="title">明星教师</div>
    <div class='teacherbox'>
      <el-table
        :data="theacherList"
        style="width: 100%">
        <el-table-column
          label="教师头像"
          width="100">
          <template slot-scope="slot">
            <img :src="getImgUrl(slot.row.face)" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="theachername"
          label="教师姓名"
          width="90">
        </el-table-column>
        <el-table-column
          prop="info"
          label="简介">
        </el-table-column>
        <el-table-column
          prop="uper"
          label="上传人"
          width="100">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      theacherList: [{
        face: 'main-jiaoshi.png',
        theachername: 'JASON',
        info: '英语外教',
        uper:'Daisy'
      },
      {
        face: 'main-jiaoshi.png',
        theachername: 'JASON',
        info: '英语外教',
        uper:'Daisy'
      }]
    }
  },
  methods: {
    getImgUrl(src){
      return require('@/assets/img/main/' + src)
    }
  },
}
</script>
<style lang="less" scoped>
  .title{
    padding: 24px 0 4px 24px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    &::before{
      content: '';
      display: inline-block;
      background-color:#3c87fe;
      width: 4px;
      height: 21px;
      margin-right: 20px;
      vertical-align:sub;
    }
    &:hover,&:focus{
      color: #438afe;
    }
  }
  .teacherinfo{
    width: 500px;
    height: 500px;
    background-color: white;
    
  }
  .teacherbox{
    padding:0 55px;
  }
  /deep/th{
    padding: 5px 0 !important;
    font-weight: bold;
    font-size: 16px;
    color: #333;
  } 
  /deep/tbody{
    .el-table__cell{
    padding: 5px 0 !important;
    }
  }
  /deep/.el-table::before{
    height: 0;
  }
  /deep/.el-table th.el-table__cell.is-leaf{
    border: none;
  }
  /deep/.el-table td.el-table__cell,.el-table th.el-table__cell.is-leaf{
    border: none !important;
  }
</style>